<template>
    <div class="user-chat-container">
         <!-- 导航 -->
        <van-nav-bar
            class="app-nav-bar"
            title="小智同学"
            left-arrow
            @click-left="$router.back()"
        />
        <!-- 导航 -->
        <!-- 聊天内容 -->
        <van-cell-group class="chat-info-wrap">
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" label="描述信息" />
        </van-cell-group>
        <!-- 聊天内容 -->
        <!-- 底部发送按钮 -->
        <van-cell-group class="bottom-tools">
            <van-field class="filed-input" v-model="message"  placeholder="请输入用户名" />
            <van-button class="send-btn" type="primary" size="small" round @click="sendBtn">发送</van-button>
        </van-cell-group>
        <!-- 底部发送按钮 -->
    </div>
</template>

<script>
import io from 'socket.io-client'
    export default {
        name: 'userChat',
        data() {
            return {
                message: '',//输入框的信息内容
                socket: '', //socket对象
            }
        },
        created() {
            // 建立连接
            const socket = io('http://ttapi.research.itcast.cn')
            // 监听事件
            this.socket = socket
            socket.on('connect',function(){
                console.log("建立通信成功")
            })
            socket.on('disconnect',function(){
                console.log("断开连接")
            })
            // 监听message事件，接受服务端数据
            socket.on('message',function(data){
                console.log(data)
            })
        },
        methods: {
            // 发送消息
            sendBtn(){
               this.socket.emit('message',{
                   msg: this.message,
                   timestamp: Date.now()
               })
            }
        },
    }
</script>

<style lang="less" scoped>
.app-nav-bar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.chat-info-wrap{
    position: fixed;
    top: 46px;
    bottom: 45px;
    left: 0;
    right: 0;
    overflow-y: auto;
}

.bottom-tools{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    .filed-input{
        padding: 0 14px;
        border: none;
        line-height: 45px;
    }
    .send-btn{
        width: 100px;
        height: 35px;
        margin: 5px 15px;
    }
}

</style>